<h3>简单导入</h3>
<p>可以导入jpg、png、gif（可能为动画）格式的图像。这些图片必须与一个固定的或简化的元数据集相关联。</p>

<form class="form" method="post" enctype="multipart/form-data" onsubmit="return validform();">
<input type="hidden" name="doimport" value="Y">
	<div class="row" style="margin: 5px">
		<div class="col-sm-5">
  <div class="form-group">
				<label class="control-label">在服务器上选择文件夹或zip文件</label>
      <div class="input-group">
					<input type="text" class="form-control" id="ServerPath" name="ServerPath" value="" size="200">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"  data-toggle="modal" data-target="#FileModal">
					<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></button>
                </span>
				</div>
				<p class="help-block">联系项目管理员，了解如何通过FTP上传你的数据。导入完成后，可手动在FTP服务器上删除这些数据。
				<br>项目管理员 : {{ g.prjmanagermailto |safe }}</p>
			</div>
		</div>

		<div class="col-sm-2" style="text-align: center">
			<label class="control-label">或者</label>
		</div>

		<div class="col-sm-5">
<div class="form-group">
				<label class="control-label">上传压缩为zip文件的文件夹</label>
				<input class="form-control" type="file" id="uploadfile" name="uploadfile" size="200">
				<p class="help-block">压缩文件夹中的所有图像 (<100Mb)。同一分类的图像必须分组在一个唯一的文件夹中。</p>
			</div>
		</div>
	</div>

  <h4>元数据信息</h4>
  <style>
    #tbl1 td {vertical-align: middle;}
  </style>
  <table style="margin-left: 15px; width: auto" class="table table-condensed table-bordered" id="tbl1">
    <tr>
      <td>Image DATE (YYYYMMDD, UTC)</td>
      <td><input type="text" name="imgdate" class="form-control" style="width:120px;" value="{{ preset.imgdate|default('',true) }}"> </td>
      <td>Image TIME (HHMM, UTC)</td>
      <td><input type="text" name="imgtime" class="form-control" style="width:70px;" value="{{ preset.imgtime|default('',true) }}"> </td>
    </tr>
    <tr>
      <td>latitude (type in -12°06.398 or -12.1066 for 12°06.398 S)</td>
      <td><input type="text" name="latitude" class="form-control" style="width:120px;" value="{{ preset.latitude|default('',true) }}"> </td>
      <td>longitude (type in -135°05.325 or -135.08875 for 135°05.325 W)</td>
      <td><input type="text" name="longitude" class="form-control" style="width:120px;" value="{{ preset.longitude|default('',true) }}"> </td>
    </tr>
    <tr>
      <td>Object Depth min (m)</td>
      <td><input type="text" name="depthmin" class="form-control" style="width:70px;" value="{{ preset.depthmin|default('',true) }}"> </td>
      <td>Object Depth max (m)</td>
      <td><input type="text" name="depthmax" class="form-control" style="width:70px;" value="{{ preset.depthmax|default('',true) }}"> </td>
    </tr>
{#     <tr>
      <td>Instrument</td>
      <td>
        <select name="instrument">
        <option></option>
          {% for v in instrum %}
            <option value="{{ v.instrument }}" {{ "selected" if preset.instrument==v.instrument }}>{{ v.instrument }}</option>
          {% endfor %}
        </select>
      </td>
    </tr>  #}
    <tr>
      <td colspan="2">Optional annotation category for ALL images of the folder</td>
      <td colspan="2"><div class="input-group" style="width: 230px">
            <select id="taxolb" name="taxolb" style="width: 210px" class='taxolb' > </select>
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="button"  data-toggle="modal" data-target="#TaxoModal" data-mytargetid="taxolb">
                    <span id=OpenTaxoLB class="glyphicon glyphicon-th-list" aria-hidden="true"></span></button>
                </span>
          </div>{# /input-group #}</td>
    </tr>
    <tr>
      <td>Optional annotator</td>
      <td><select id="userlb" name="userlb" style="width: 210px" class='userlb' ><option value="{{ preset.userlb }}" selected>{{ preset.annot_name }}</option> </select></td>
      <td>Optional status </td>
      <td><select name="status">
        <option></option>
        <option value="P" {{ "selected" if preset.status=="P" }}>predicted</option>
        <option value="D" {{ "selected" if preset.status=="D" }}>dubious</option>
        <option value="V" {{ "selected" if preset.status=="V" }}>validated</option>
      </select></td>
    </tr>
  </table>
<button type=submit style="margin-left: 150px" class="btn btn-success">导入数据</button>

</form>


<script>

$(document).ready(function() {
    $('#FileModal').on('show.bs.modal', function () {
        $("#TaxoModalBody").html(""); {# Pour eviter les conflit sur le jstree suite à des ouverture successive car le jstree est dans la modal cachée #}
         $("#FileModalBody").html("Loading...").load("/common/ServerFolderSelect");
    });
    $(".taxolb").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
    }); // Select2 Ajax
    $('#TaxoModal').on('show.bs.modal', function () {
         $("#FileModalBody").html("");
         $("#TaxoModalBody").html("Loading...").load("/search/taxotree?target=taxolb");
    });
  }); // Ready
    $(".userlb").select2({
        ajax: {
            url: "/search/users",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 2
    }); // Select2 Ajax

function validform() {
  if(($('input[name=imgdate]').val()=='')
   ||($('input[name=imgtime]').val()=='')
   ||($('input[name=longitude]').val()=='')
   ||($('input[name=latitude]').val()=='')
  ){
    var r = confirm("We encourage you to fill geographic(Lat/Long) and temporal (date/time) data !\n Do you really want to import ?");
    return r;
  }
return true;
}

</script>

<!-- Modal -->
<div class="modal " id="FileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">选择一个文件夹或一个zip文件</h4>
      </div>
      <div class="modal-body">
        <div id="FileModalBody">...</div>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal " id="TaxoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">分类树</h4>
      </div>
      <div class="modal-body">
        <div id="TaxoModalBody">...</div>
      </div>
    </div>
  </div>
</div>


